<style lang="scss" scoped>
  .commonecharts_body {
    .echart_container {
      width: 720px;
      /*min-width: 300px;*/
      height: 500px;
      box-sizing: border-box;
    }
  }
</style>
<template>
  <div class="commonecharts_body" >
    <div class="echart_container" :class="'echart_container_' + commonEchartsObj.echarts_name">

    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import moment from 'moment'

  export default {

    data() {
      return {
        mychart: null
      }
    },
    props: {
      commonEchartsObj: {
        type: Object,
        required: true
      },
      percent: {
        type: Boolean,
        required: false
      }
    },
    mounted() {
      this.initEcharts()
    },
    methods: {
      initEcharts() {
        let that = this;
        const Echarts_container = '.echart_container_' + this.commonEchartsObj.echarts_name;
        const myChart = echarts.init(document.querySelectorAll(Echarts_container)[0], null, {renderer: 'svg'});
        this.mychart = myChart;
        myChart.resize()
        const option = {
          animation: false,
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: 12 * window.$ratio
            },
            extraCssText: 'z-index:999;',
            //  backgroundColor: 'rgba(0,0,0,0.7)',
            padding: 10,
            axisPointer: {
              type: 'line',
              lineStyle: {
                color: '#1b5070'
              }
            },
            formatter: function(params) {
              var result = ''
              console.log(params)
              params.forEach(function (item, index) {

              })
              result += params[0].axisValue + "</br>"  + params[0].seriesName + ': ' + params[0].data +"</br>"
                + params[1].seriesName + ': ' + (params[1].data +params[0].data)
              return result
            }
          },
          xAxis: {
            type: 'value',
            boundaryGap: true,
            axisLine: {
              lineStyle: {
                color: '#203643'
              }
            },
            splitNumber: 12,
            axisLabel: {
              fontSize: 18,
              color: '#597bad',
              padding: [10,0,0,0],
              formatter: function (value) {
               if(value % 2 === 0){
                 return value
               }
              }
            },
            splitLine:{
              show:false,
              lineStyle:{
                type:'dashed',
                color: '#203643'
              }
            },
            axisPointer: {
              show: false
            },
            data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]
          },
          yAxis: {
            type: 'category',
            axisLabel: {
//              formatter: `{value} ${ that.wan ? '万': ''}${that.percent? '%': ''}`,
              fontSize: 14,
              color: '#597bad',
            },
            axisLine: {
              lineStyle: {
                color: 'transparent'
              }
            },
            splitLine:{
              show:true,
              lineStyle:{
                type:'dashed',
                color: '#203643'
              }
            },
            data: this.commonEchartsObj.line_date,
          },
          series: this.commonEchartsObj.line_list
        };
        myChart.setOption(option);
      }

    },
    watch: {
      'commonEchartsObj': {
        handler(newVal, old) {
          this.initEcharts()
        },
        deep: true
      },
    },
    beforeDestroy() {
      if (this.mychart&& this.mychart.dispose) {
        this.mychart.dispose()
      }
    }
  }
</script>
